<template>
  <div id="app">
    <!-- <h3>Demo</h3> -->
      <div class="container">
        <div class="comp">
          <test/>
        </div>
        <div class="comp">
          <todo-v3 title="Vue3 Composition API" initInput="C"/>
        </div> -->
        <div class="comp">
          <todo-v2 title="Vue2 Options-based API" initInput="C"/>
        </div> -->
      </div>

  </div>
</template>

<script lang="ts">
// Vue3 - code案例
// import Test from '@/views/code/0-1-props/father.vue'
// import Test from '@/views/code/0-2-context/father.vue'
// import Test from '@/views/code/1-ref/ref.vue'
// import Test from '@/views/code/2-reactive/reactive.vue'
// import Test from '@/views/code/3-toRefs/toRefs.vue'
// import Test from '@/views/code/4-toRef/toRef.vue'
// import Test from '@/views/code/4-toRef/props-father.vue'
// import Test from '@/views/code/5-watch/watch.vue'
// import Test from '@/views/code/6-watchEffect/watchEffect.vue'
// import Test from '@/views/code/7-computed/computed-unchange.vue'
// import Test from '@/views/code/7-computed/computed-change.vue'
// import Test from '@/views/code/8-readonly/readonly.vue'
// import Test from '@/views/code/9-provide-inject/Father.vue' // provider/inject
// import Test from '@/views/code/10-async-await-for/async-await-for.vue'
// import Test from '@/views/code/10-async-await-for/async-await-for-of.vue'
// import Test from '@/views/code/10-async-await-for/async-await-forEach.vue'

// Vue3 - demo
// import TodoV3 from '@/views/demo/TodoV3.vue'
import TodoV3 from '@/views/demo/TodoV3Topics.vue'
import TodoV2 from '@/views/demo/TodoV2.vue'

// 中秋文章
// import Test from '@/views/code/11-Mid-Autumn/midAutumn.vue'

export default {
  name: 'App',
  components: {
    TodoV3,
    TodoV2
    // Test
  }
}
</script>

<style lang="scss">
#app {
  text-align: center;
  margin-top: 60px;
}

.container {
  margin-top: 3em;
  display: flex;
  justify-items: center;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.comp {
  margin-left: 2em;
  width: 600px;
}

.card-style {
  width: 100%;
  height: 30px;
  background-color: #CCFFFF;
  line-height: 30px;
  margin-bottom: 10px;
}
.close {
  height: 30px;
  margin-bottom: 10px;
  background-color: #FFCC99;
  border: none;
  border-radius: 5px;
}
</style>
